<template>
	<div>
		<Table :where="where" :url="url" ref="Table" :col="7">
			<div slot="hd-btn">
				<el-button type="primary" @click="add">添加角色</el-button>
			</div>
			<el-table-column prop="aroleid" fixed label="角色id" align='center'>
			</el-table-column>
			<el-table-column prop="role_name" label="角色类型" align='center'>>
			</el-table-column>
			<el-table-column prop="description" label="角色类型描述" width="150" align='center'>>
			</el-table-column>
			<el-table-column prop="create_by" label="创建人" align='center'>>
			</el-table-column>
			<el-table-column prop="update_by" label="更新人" align='center'>>
			</el-table-column>
			<el-table-column label="创建时间" width="200">
				<template slot-scope="scope">
					<i class="el-icon-time"></i>
					<span style="margin-left: 10px">{{ scope.row.c_time }}</span>
				</template>
			</el-table-column>
			<el-table-column label="更新时间" width="200">
				<template slot-scope="scope">
					<i class="el-icon-time"></i>
					<span style="margin-left: 10px">{{ scope.row.u_time }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" align='center' width="180">
				<template slot-scope="scope">
					<el-button size="mini" @click="edit(scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</Table>
		<Dialog @close="close" @confirm="confirm" :dialogISshow="dialogISshow" :options="options" title="添加管理员" labelWidth="140px">
		</Dialog>
	</div>
</template>

<script>
import { roleTypWhere, roleTypDialog } from './form';
export default {
	data() {
		return {
			where: roleTypWhere,
			url: '/admin/roleTypeList',
			dialogISshow: false,
			options: roleTypDialog,
			baseOptions: JSON.parse(JSON.stringify(roleTypDialog)),
			operationType: '',
			id: null,
			roleTypeList: [],
			submitIng: false,
			useType: '',
		};
	},
	mounted() {},
	methods: {
		confirm(data) {
			let result = '';
			let fromData = JSON.parse(JSON.stringify(data));
			if (this.operationType === 'edit') {
				fromData.aroleid = this.id;
				result = this.$http('/admin/roleTypeUpData', fromData);
			} else {
				result = this.$http('/admin/addRoleType', fromData);
			}
			result
				.then(res => {
					if (res.code === 10200) {
						log.ok(res.msg);
						this._refresh();
					}
				})
				.catch(err => {});
			this.close();
		},
		close() {
			// this.options = activeOpt;
			this.clearn();
			this.dialogISshow = false;
		},
		add() {
			this.dialogISshow = true;
		},
		edit(item) {
			this.operationType = 'edit';
			this.id = item.aroleid;
			this.fill(item);
			this.dialogISshow = true;
			// this.useType = 'edit';
		},
		del(item) {
			this.$msgbox({
				title: '提示',
				message: '删除后不可恢复，是否要删除！',
				showCancelButton: true,
				center: true,
			})
				.then(res => {
					this.$http('/admin/roleTypeUpData', { aroleid: item.aroleid, operationType: 'del' })
						.then(res => {
							log.ok(res.msg);
							this.$refs.Table._search();
						})
						.catch(err => {});
				})
				.catch(res => {});
		},
		clearn() {
			for (let key in this.options) {
				this.options[key].value = this.baseOptions[key].value;
				this.options[key].disabled = this.baseOptions[key].disabled;
				this.options[key].protect = this.baseOptions[key].protect;
			}
		},
		fill(data) {
			let options = this.options;
			this.prizeId = data.id;
			for (let key in options) {
				if (data.hasOwnProperty(key)) {
					options[key].value = data[key];
					options[key].hasOwnProperty('fileList') ? (options[key].fileList = data[key]) : '';
				}
			}
		},
		disabled(ary = []) {
			let options = this.options;
			ary.forEach(key => {
				if (options.hasOwnProperty(key)) {
					options[key].disabled = true;
				}
			});
		},
		_refresh() {
			this.$refs.Table._search();
		},
	},
};
</script>
